CSS2 introduces new user interface properties, which allow the shape of the cursor to be set based on the object that it is hovering over, and to define the outline of an element. When the cursor is inserted in a field, and keystrokes will be directed to that field, it is said to have the focus. It is usual for some kind of outline to indicate this fact.
CSS2 also introduces a new series of color keywords, that refer to system values such as the color of window borders. You can learn more about these in the section on color values.
Lastly, CSS2 introduces the system font concept, which allows you to specify fonts based on those used by the system for various kinds of object, such as menu items and the default text for window items. For more on this, see the section on text style properties.
This property sets the cursor when the mouse is hovering over a selected element.
The cursor can be specified as either one of several keyword values, or as a URL that points to a file of type .cur (a cursor resource file).
The possible keyword values for the cursor property are
The default cursor value is auto, which corresponds to the current way in which browsers draw cursors.
Child elements inherit the cursor of their parent elements. Remember, inherited properties can be overridden.
This property sets the outline around an object, to indicate that the object has the focus. Objects do not have to have the focus to have an outline, however, good user interface principles should be followed. As a general rule, users expect the outline to indicate that the outlined object has the focus.
outline is a shorthand for three properties described below, outline-style, outline-width and outline-color. It takes a list of width, style and color values (as described for the individual properties below.)
The default value is the same as for each of the values described below.
Child elements do not inherit the outline of their parent.
outline-color specifies the color to be used for drawing the outline around an element. Unlike a border, the color of each edge of an outline is the same.
outline-color is specified by a color. We discuss color values in detail in our values section. In addition, the keyword invert can be used.
invert inverts each of the pixels in the border. This ensures that an outline is visible regardless of background color.
If no color is specified for the outline, the outline is invert, which means the outline will be the inverted color of the background.
The outline-color of an element is not inherited from its parent element
In addition to width and color, the outline of an element can have a style. There are several possible styles.
Outlines are specified using keywords.
The outline-style keywords are
If no outline-style property is specified, the style of an outline is none.
Elements do not inherit the outline-style of their parent elements.
Outline widths can take either keyword values, or length values.
The keyword values that can be used are
There is no specification for what these keywords mean, so different browsers will probably draw them as different thicknesses. The only guarantee is that thin is not thicker than medium which is no thicker than thick.
Length values are discussed in detail in our section on values. Using relative length values you can create borders that are in proportion with the size of an element, or its contents.
If no width is set, the thickness of an outline is medium.
An element does not inherit the thickness of its parent element's outline.